<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8"/>
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width"/>
<title>Studio Francesca - Premium Theme by WowThemes.net</title>
<!-- Included CSS Files-->
<link rel="stylesheet" href="stylesheets/style.css">
<link rel="stylesheet" href="stylesheets/nivoslider.css"><!-- nivo slider stylesheet -->
<link rel="stylesheet" href="stylesheets/skins/teal.css"><!-- skin color -->
<link rel="stylesheet" href="stylesheets/responsive.css">
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
<!-- HIDDEN PANEL 
================================================== -->
<div id="panel">
	<div class="row">
		<div class="twelve columns">
			<img src="images/info.png" class="pics" alt="info">
			<div class="infotext">
				 Thank you for visiting my theme! Replace this with your message to visitors.
			</div>
		</div>
	</div>
</div>
<p class="slide">
	<a href="#" class="btn-slide"></a>
</p>
<!-- HEADER
================================================== -->
<div class="row">	
		<div class="four columns">
			<div class="logo">
				<a href="index.html"><h4>Studio Francesca</h4></a>
			</div>
		</div>
		<div class="eight columns noleftmarg">		
			<nav id="nav-wrap">
				<ul class="nav-bar sf-menu">
				
					<li class="current">
					<a href="index.html">Home</a>
						<ul>
												
						<li><a href="index2.html">Without slider</a></li>						
						</ul>
					</li>
					
					<li>
					<a href="#">Portofolio</a>
						<ul>
						<li><a href="portofolio2.html">2 Columns</a></li>
						<li><a href="portofolio3.html">3 Columns</a></li>
						<li><a href="portofolio4.html">4 Columns</a></li>						
						<li><a href="portofoliodetail.html">Project Details</a></li>
						</ul>
					</li>
					
					<li>
					<a href="#">Blog</a>
						<ul>
						<li><a href="blogpage1.html">Blog page style 1</a></li>
						<li><a href="blogpage2.html">Blog page style 2</a></li>
						<li><a href="blogpage3.html">Blog page style 3</a></li>
						<li><a href="blogsinglepost.html">Single post</a></li>
						</ul>
					</li>
					
					<li>
					<a href="#">Pages</a>
						<ul>
						<li><a href="about.html">About us</a></li>
						<li><a href="services.html">Services</a></li>						
						</ul>
					</li>
					
					<li>
					<a href="#">Features</a>
						<ul>
						<li><a href="columns.html">Columns</a></li>
						<li><a href="elements.html">Elements</a></li>
						<li><a href="typography.html">Typography</a></li>
						</ul>
					</li>
					
					<li>
					<a href="contact.html">Contact</a>
					</li>
					
				</ul>
				</nav>
		</div>	
</div>
<div class="clear">
</div>
<!-- SUBHEADER
================================================== -->
<div id="subheader">
	<div class="row">
		<div class="twelve columns">
			<p class="left">
				 PROJECT DETAIL
			</p>
			<p class="right">
				<a href="portofolio2.html">View more projects</a>
			</p>
		</div>
	</div>
</div>
<div class="hr">
</div>
<!-- CONTENT 
================================================== -->
<div class="row">
	<!-- PROJECT DESCRIPTION-->
	<div class="six columns">
		<div class="sectiontitle">
			<h4>Project name</h4>
		</div>
		<p>
			Phasellus nec nibh id arcu pharetra blandit. Nullam mollis, lacus nec lacinia porttitor, odio eros laoreet nibh, at scelerisque magna justo eu turpis. Duis sed risus sit amet nunc cursus suscipit. Duis sed est turpis. Sed imperdiet elit eget massa consectetur sit amet rhoncus purus sagittis. Ut vitae nulla tempus erat accumsan porta a ut turpis. Suspendisse pharetra sagittis tellus, eu viverra neque molestie id.
		</p>
		<dl class="tabs">
			<dd class="active"><a href="#simple1">Features</a></dd>
			<dd><a href="#simple2">What we did</a></dd>
			<dd><a href="#simple3">Client's Feedback</a></dd>
		</dl>
		<ul class="tabs-content">
			<li class="active" id="simple1Tab">
			<p>
				 Et non ex maxima parte de tota iudicabis? Item de contrariis, a quibus ad genera formasque generum venerunt. Sit enim idem caecus, debilis. Duo Reges: constructio interrete. Nulla tempus erat accumsan.
			</p>
			<div class="six columns noleftmargin">
				<p>
					<img src="images/check.png" alt=""><b>consectetur adipiscing</b>
				</p>
				<p>
					<img src="images/check.png" alt=""><b>maxima parte</b>
				</p>
			</div>
			<div class="six columns">
				<p>
					<img src="images/check.png" alt=""><b>genera formasque</b>
				</p>
				<p>
					<img src="images/check.png" alt=""><b>quibus ad genera</b>
				</p>
			</div>
			</li>
			<li id="simple2Tab">
			<p>
				 Consectetur adipiscing elit. Et non ex maxima parte de tota iudicabis? Item de contrariis, a quibus ad genera formasque generum.
			</p>
			<p>
				<img src="images/check.png" alt=""> genera formasque
			</p>
			<p>
				<img src="images/check.png" alt=""> quibus ad genera
			</p>
			<p>
				 Et non ex maxima parte de tota iudicabis? Item de contrariis, a quibus ad genera formasque generum venerunt. Sit enim idem caecus, debilis. Duo Reges: constructio interrete.
			</p>
			</li>
			<li id="simple3Tab">
			<p>
				<i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et non ex maxima parte de tota iudicabis? Item de contrariis, a quibus ad genera formasque generum."</i>
			</p>
			<p>
				<i>"Adipiscing elit. Et non ex maxima parte de tota iudicabis? Item de contrariis, a quibus ad genera formasque generum."</i>
			</p>
			</li>
		</ul>
	</div>
	<!-- end main content-->
	<!-- SLIDER-->
	<div class="six columns">
		<div class="slider-wrapper theme-default">
			<div id="slider" class="nivoSlider detailslider">
				<img src="images/temp/nivo1.jpg" data-thumb="" alt=""/>
				<img src="images/temp/nivo2.jpg" data-thumb="" alt=""/>
				<img src="images/temp/nivo3.jpg" data-thumb="" alt=""/>
			</div>
		</div>
	</div>
	<!-- end sliderr-->
</div>
<div class="hr">
</div>
<!-- TWITTER
================================================== -->
<div class="tweetarea">
	<div class="tweettext">
		<div class="row">
			<div class="twelve columns">
				<div class="tweet">
				</div>
			</div>
		</div>
	</div>
</div>
<!-- FOOOTER 
================================================== -->
<div id="footer">
	<footer class="row">
	<p class="back-top floatright">
		<a href="#top"><span></span></a>
	</p>
	<div class="four columns">
		<h1>ABOUT US</h1>
		 Our goal is to keep clients satisfied!
	</div>
	<div class="four columns">
		<h1>GET SOCIAL</h1>
		<div class="social facebook">
			<a href="#"></a>
		</div>
		<div class="social twitter">
			<a href="#"></a>
		</div>
		<div class="social deviantart">
			<a href="#"></a>
		</div>
		<div class="social flickr">
			<a href="#"></a>
		</div>
		<div class="social dribbble">
			<a href="#"></a>
		</div>
	</div>
	<div class="four columns">
		<h1 class="newsmargin">NEWSLETTER</h1>
		<div class="row collapse newsletter floatright">
			<div class="ten mobile-three columns">
				<input type="text" class="nomargin" placeholder="Enter your e-mail address...">
			</div>
			<div class="two mobile-one columns">
				<a href="#" class="postfix button expand">GO</a>
			</div>
		</div>
	</div>
	</footer>
</div>
<div class="copyright">
	<div class="row">
		<div class="six columns">
			 &copy;<span class="small"> Copyright 2013 Your Agency Name</span>
		</div>
		<div class="six columns">
			<span class="small floatright"> Purchase "Studio Francesca" - WowThemes.net</span>
		</div>
	</div>
</div>
<!-- JAVASCRIPTS 
================================================== -->
<!-- Javascript files placed here for faster loading -->
<script src="javascripts/foundation.min.js"></script>
<script src="javascripts/jquery.nivo.slider.pack.js"></script>
<script src="javascripts/jquery.cycle.js"></script>
<script src="javascripts/app.js"></script>
<script src="javascripts/modernizr.foundation.js"></script>
<script src="javascripts/slidepanel.js"></script>
<script src="javascripts/scrolltotop.js"></script>
<script src="javascripts/hoverIntent.js"></script>
<script src="javascripts/superfish.js"></script>
<script src="javascripts/responsivemenu.js"></script>
<script src="javascripts/jquery.tweet.js"></script>
<script src="javascripts/twitterusername.js"></script>
</body>
</html>